<template>
  <main>
    <div class="container">
      <input
        v-model="inputValue"
        type="text"
        placeholder="请输出城市名称"
        @change="handleInput"
      />
      <ul :class="{ opacity: inputValue == '' }">
        <li @click="handClick">{{ cityLi }}</li>
      </ul>
      <!-- 数据中存在保存城市就渲染 -->
      <template v-if="showCitys != ''">
        <div
          class="showcity"
          :class="{ opacity: inputValue }"
          v-for="(item, index) in showCitys"
          :key="index"
        >
          <div class="city-temp">
            <div class="city">{{ item[0] }}</div>
            <div class="temp">{{ item[1] }}度</div>
          </div>
          <div class="button">
            <button @click="handleLook(index)">查看</button>
            <button @click="handleDelete(index)">删除</button>
          </div>
        </div>
      </template>

      <div class="showtitle" v-else>
        暂时没有保存过城市天气信息,请查询后点击右上角"+"保存
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getAdcodeBycity, getWeatherByadcodea } from '@/api'; //请求函数
import { useCounterStore } from '@/stores/counter.js'; //导出pinia

import { useRouter } from 'vue-router';

import { storeToRefs } from 'pinia';
const { selectCity, selectCityAdcode, showCitys } = storeToRefs(
  useCounterStore()
);
const { changeDatas, weatherDatas, deleteDatas, getShowCitys } =
  useCounterStore();

const router = useRouter();

const inputValue = ref(''); //input双向绑定,同时绑定ul和showcity是否显示
const cityLi = ref('');

// 打开页面时加载本地数据
onMounted(() => {
  getShowCitys();
});

// 查找城市
const handleInput = async () => {
  const res = await getAdcodeBycity(inputValue.value);
  if (res.status === '1') {
    console.log('请求成功');
    // 成功时赋值到仓库
    const adcode = res.geocodes[0].adcode;
    const city = res.geocodes[0].formatted_address;
    changeDatas(city, adcode);
    // 单独赋值用来加载li显示框,在跳转时给他清空
    cityLi.value = city;
  } else {
    console.log('请求失败');
    selectCity.value = '似乎没有找到你查找的城市';
  }
};
// 点击城市查找天气
const handClick = async () => {
  const res = await getWeatherByadcodea(selectCityAdcode.value);
  // 获取天气数组
  const weathers = res.forecasts[0].casts;
  //   map改变日期格式
  weathers.map((item) => {
    const date = item.date.split('-');
    item.date = `${date[1]}-${date[2]}`;
    return item;
  });
  //   赋值仓库天气数组
  weatherDatas(weathers);
  //   跳转时清空li,防止下次搜索时还显示上次数据
  cityLi.value = '';
  //   跳转到天气页面
  router.push('/search');
};

// 点击查看时
const handleLook = async (index) => {
  // 改变选中的城市为当前点击的城市
  const adcode = showCitys.value[index][2];
  const city = showCitys.value[index][0];
  changeDatas(city, adcode);
  // 再次查找天气
  handClick();
};

// 删除
const handleDelete = (index) => {
  deleteDatas(index);
};
</script>

<style lang="scss" scoped>
.display {
  display: flex;
}
::placeholder {
  color: #999;
  font-size: 18px;
}
main {
  margin: 20px 160px;
  //   background: #999;
  .container {
    margin: 0 80px;
    input {
      width: 100%;
      height: 40px;
      border: none;
      background: rgb(0, 102, 138);
      outline: none;
      font-size: 18px;
      color: #fff;
      border-bottom: 1px solid white; /* 不聚焦时有白色下边框 */
      transition: all 0.2s;
      &:focus {
        border-bottom-color: transparent;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
    ul {
      margin-top: 5px;
      width: 100%;
      height: 40px;
      color: #fff;
      background: rgb(0, 78, 113);
      font-size: 18px;
      &.opacity {
        opacity: 0;
      }
      li {
        line-height: 40px;
        cursor: pointer;
      }
    }
    .showcity {
      display: flex;
      align-items: center;
      gap: 100px;
      transition: all 0.2s;
      &:hover .button {
        display: flex;
      }
      // 搜索时添加类,不显示
      &.opacity {
        opacity: 0;
      }
      .city-temp {
        flex: 1;
        background: rgb(0, 78, 113);
        display: flex;
        height: 40px;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        margin-top: 10px;
        padding: 0 10px;
      }
      .button {
        display: none;
        // justify-content: right;
        // align-items: center;
        gap: 10px;
        transition: all 0.2s;
        button {
          width: 80px;
          height: 40px;
          font-size: 16px;
          background: rgb(234, 179, 8);
          outline: none;
          border: none;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .showtitle {
      height: 40px;
      color: #fff;
      text-align: center;
      font-size: 18px;
    }
  }
}
</style>
